<template>
	<view>
		<map id="opeartorTrackMap" class="map" :latitude="latitude" :longitude="longitude" :scale="11" :polyline="polyline"
			:markers="markers">
			<!-- 颜色选择 S -->
			<u-popup :show="show" mode="center" :safe-area-inset-bottom="false" background-color="rgba(0,0,0,0.2)"
				@click="show = false">
				<view class="pop-content">
					<view class="pop-tit">颜色选择</view>
					<view class="pop-color">
						<view class="pop-item flex-center" v-for="(item, index) in colorList" :key="index"
							:style="{'background': item}" @click="handleThisColor(item)">
							<image src="../static/icon23.png" mode="aspectFill" class="pop-img"
								v-if="item == changeColor"></image>
						</view>
					</view>
					<btn :marginTop="36" :width="320" text="确定" @onBtnClick="onBtnClick"></btn>
				</view>
			</u-popup>
			<!-- 颜色选择 E -->
			<!-- 顶部 S -->
			<view class="top-box" v-if="isDetail2">
				<view class="top-content">
					<view class="top-item">
						<text>时 间</text>
						<text>{{$xeu.toDateString(currentMsg.dateTime*1000)}}</text>
					</view>
					<view class="top-item">
						<text>速 度</text>
						<text>{{currentMsg.speed||'0.00'}}km/h, {{directionToName(currentMsg.direction)}}</text>
					</view>
					<view class="top-item">
						<text>里程</text>
						<text>{{currentMsg.mileage.toFixed(2)||'0.00'}}km</text>
					</view>

				</view>
			</view>
			<!-- 顶部 E -->
			<!-- 底部操作栏 S -->
			<view class="btm-box">
				<!-- top S -->
				<view class="btm-com" v-if="isSet">
					<view class="btm-top-view flex-center">
						<view class="btm-top-l">
							<view class="color-box" :style="{'borderColor': defaultColor}" @tap="handleShow">
								<view class="color-view" :style="{'background': defaultColor}"></view>
							</view>
						</view>
						<view class="btm-top-r flex-center">
							<text>线条宽度</text>
							<view class="btm-top-slider">
								<slider value="2" step="1" :min="2" :max="10" activeColor="#3791E9" :block-size="12"
									block-color="#3791E9" @change="sliderWidthChange" />
							</view>
						</view>
					</view>
					<view class="btm-top-view flex-center">
						<view class="btm-top-l">标准</view>
						<view class="btm-top-r flex-center">
							<text>移动速度</text>
							<view class="btm-top-slider">
								<slider value="3" step="1" :min="1" :max="5" activeColor="#3791E9" :block-size="12"
									block-color="#3791E9" @change="sliderSpeedChange" />
							</view>
						</view>
					</view>
				</view>
				<!-- top E -->
				<!-- mid S -->
				<view class="btm-mid btm-com flex-center">
					<view class="btm-mid-view" @tap="handleStart">
						<image :src="isStart ? '../static/icon20.png' : '../static/icon21.png'" class="btm-mid-img">
						</image>
					</view>
					<view class="btm-mid-view" @tap="handleReset">
						<image src="../static/icon22.png" class="btm-mid-img"></image>
					</view>
					<view class="btm-mid-view2">
						<slider :value="sliderValue" step="1" activeColor="#3791E9" :block-size="12"
							block-color="#3791E9" @change="sliderChange" />
					</view>
					<view class="btm-mid-view" @tap="handleSet">设置</view>
					<view class="btm-mid-view">

					</view>
					<!-- <view class="btm-mid-view" @tap="handleDetail">详情</view> -->
				</view>
				<!-- mid E -->
				<!-- btm S -->
				<view class="btm-com btm-btm-box" v-if="isDetail">
					<view class="btm-btm">
						<text>行车时长</text>
						<text>{{wholeInfo.move_long}}</text>
					</view>
					<view class="btm-btm">
						<text>最高速度</text>
						<text>{{wholeInfo.max_speed}}km/h</text>
					</view>
					<view class="btm-btm">
						<text>停车时长</text>
						<text>{{wholeInfo.stop_long}}</text>
					</view>
					<view class="btm-btm">
						<text>平均速度</text>
						<text>{{wholeInfo.avg_speed}}km/h</text>
					</view>
					<view class="btm-btm">
						<text>行车里程</text>
						<text>{{wholeInfo.mile}}km</text>
					</view>
					<view class="btm-btm">
						<text>定位点数</text>
						<text>{{wholeInfo.gps_size}}</text>
					</view>
				</view>
				<!-- btm E -->
			</view>
			<!-- 底部操作栏 E -->
		</map>
	</view>
</template>

<script>
	import btn from '../components/btn.vue';
	import utils from '@/utils/utils';
	export default {
		props: {
			info: Array,
			wholeInfo: Object,
			sInfo: Object,
			eInfo: Object
		},
		components: {
			btn
		},
		data() {
			return {
				index: 0,
				isStart: false,
				isDetail: false,
				isDetail2: false,
				isSet: false,
				timer: null,
				show: false,
				defaultColor: '#888888',
				changeColor: '#888888',
				defaultWidth: 4,
				durationTime: 1000,
				carImg: "https://sanitation-iot2.obs.myhuaweicloud.com/projectImage/icon_operator_online.png",
				colorList: [
					'#888888', '#7AC668', '#FFCC00', '#FFA200', '#99D5FE',
					'#FF0024', '#D7A675', '#D8B5BC', '#73BC84', '#BDDCDE',
					'#FEAF64', '#DEE6CE', '#6C736B', '#3AB2D5',
					'#D7E6AF', '#C2C2C2', '#42D378', '#53BDBB'
				] //'#486ACE', '#3791E9',
			}
		},
		computed: {
			latitude() {
				return this.info[0].lat
			},
			longitude() {
				return this.info[0].lng
			},
			currentMsg() {
				return this.info[this.index]
			},
			sliderValue() {
				return Math.floor(this.index * 100 / this.info.length)
			},
			polyline() {
				let points = []
				this.info.forEach(item => {
					points.push({
						latitude: item.lat,
						longitude: item.lng
					})
				})
				
				let passPoints = []
				for (var i=0; i<=this.index; i++){
					var item = this.info[i]
					passPoints.push ({
						latitude: item.lat,
						longitude: item.lng
					})
				}
				// 开启后，对手机性能影响较大
				// if (passPoints.length>1){
				// 	const result = [{
				// 		points: points,
				// 		color: this.defaultColor,
				// 		width: this.defaultWidth,
				// 		arrowLine: true
				// 	}
				// 	,{
				// 		points: passPoints,
				// 		color: '#486ACE',
				// 		width: this.defaultWidth,
				// 	},
				// 	]
				// 	return result
				// }else
				{
					const result = [{
						points: points,
						color: this.defaultColor,
						width: this.defaultWidth,
						arrowLine: true
					}]
					return result
				}
			},
			markers() {
				const result = [{
					id: 1,
					latitude: this.sInfo.lat,
					longitude: this.sInfo.lng,
					iconPath: '../static/s.png',
					width: 36,
					height: 50
				}, {
					id: 2,
					latitude: this.eInfo.lat,
					longitude: this.eInfo.lng,
					iconPath: '../static/e.png',
					width: 36,
					height: 50
				}, {
					id: 3,
					latitude: this.sInfo.lat,
					longitude: this.sInfo.lng,
					iconPath: this.carImg,
					width: 26,
					height: 26,
					zIndex: 999,
					// rotate: this.currentMsg.drct * 1,
					label: ""
				}]
				return result
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext("opeartorTrackMap", this);
		},
		methods: {
			directionToName(direction) {
				return utils.directionToString(direction)
			},
			handleShow() {
				this.show = true
			},
			handleThisColor(color) {
				this.changeColor = color
			},
			onBtnClick() {
				this.defaultColor = this.changeColor
				this.show = false
			},
			sliderWidthChange(e) {
				this.defaultWidth = e.detail.value
			},
			sliderSpeedChange(e) {
				const {
					value
				} = e.detail;
				let t = 1
				switch (value) {
					case 1:
						t = 3000
						break;
					case 2:
						t = 2000
						break;
					case 3:
						t = 1000
						break;
					case 4:
						t = 800
						break;
					case 5:
						t = 500
						break;
					default:
						t = 1000
						break;
				}
				this.durationTime = t
				// clearInterval(this.timer)
				// this.timer = null
				// this.timer = setInterval(() => {
				// 	this.index = this.index + 1
				// 	if (this.index == this.info.length - 1) {
				// 		clearInterval(this.timer)
				// 		this.timer = null
				// 	}
				// }, t)
			},
			handleStart() {
				this.isStart = !this.isStart;
				this.isDetail2 = this.isStart
				if (this.isStart) {
					this.movePoint()
				}
			},
			handleReset() {
				clearInterval(this.timer)
				this.timer = null
				this.index = 0
				this.isDetail = false
				this.isDetail2 = false
				this.isSet = false
				this.isStart = false
				this.defaultColor = '#888888'
				this.changeColor = '#888888'
				this.defaultWidth = 2
				this.resetPoint()
			},
			sliderChange(e) {
				const {
					value
				} = e.detail;
				this.index = Math.floor(this.info.length * value / 100)
				this.resetPoint()
			},
			handleDetail() {
				this.isDetail = !this.isDetail;
			},
			handleSet() {
				this.isSet = !this.isSet;
			},
			//移动坐标
			movePoint() {
				/*
				//也可以用这个方法
				this.mapContext.moveAlong({
					duration: 30000,
					markerId: this.markers[0].id,
					path: this.polyline[0].points
				})
				return
				*/
				this.mapContext.translateMarker({
					duration: this.durationTime,
					markerId: 3,
					destination: {
						latitude: this.info[this.index].lat,
						longitude: this.info[this.index].lng
					},
					animationEnd: res => {
						//播放结束，继续移动到下一个点，最后一个点时结束移动
						if (this.index < this.info.length - 1) {						
							if (this.isStart) {
								this.index++
								this.movePoint()
							}
						} else {
							this.index = 0
							this.isStart = false
						}
					}
				})
			},
			resetPoint(){
				console.log("resetPoint")
				this.mapContext.translateMarker({
					duration: 10,
					markerId: 3,
					destination: {
						latitude: this.info[this.index].lat,
						longitude: this.info[this.index].lng
					},
					animationEnd: res => {
						
					}
				})
			}
		},
	}
</script>

<style scoped>
	.map {
		width: 750rpx;
		height: calc(100vh);
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop-content {
		width: 452rpx;
		padding: 34rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.pop-tit {
		font-size: 28rpx;
		margin-bottom: 36rpx;
	}

	.pop-color {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-row-gap: 28rpx;
		grid-column-gap: 28rpx;
	}

	.pop-item {
		width: 68rpx;
		height: 68rpx;
		border: 1px solid #C2CCCD;
		box-sizing: border-box;
		border-radius: 50%;
	}

	.pop-img {
		width: 38rpx;
		height: 28rpx;
	}

	.top-box {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		padding: 10rpx 24rpx 0 24rpx;
	}

	.top-content {
		background: #FFFFFF;
		border: 1px solid #E5E5E6;
		border-radius: 8rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
	}

	.top-item {
		display: flex;
		align-items: center;
		min-height: 40rpx;
		padding: 24rpx 0;
		border-bottom: 1px solid #E8E8E9;
	}

	.top-item text:first-child {
		min-width: 146rpx;
		padding-left: 12rpx;
		white-space: nowrap;
		border-right: 1px solid #E8E8E9;
	}

	.top-item text:last-child {
		padding-left: 36rpx;
	}

	.btm-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 24rpx 24rpx 24rpx;
	}

	.btm-com {
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.btm-top-view {
		height: 76rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
	}

	.btm-top-l {
		width: 64rpx;
	}

	.color-box {
		width: 42rpx;
		height: 42rpx;
		padding: 2rpx;
		border-width: 2rpx;
		border-style: solid;
	}

	.color-view {
		width: 100%;
		height: 100%;
	}

	.btm-top-r {
		flex: 1;
		height: 30rpx;
		padding-left: 24rpx;
		border-left: 1px solid #E4E4E4;
	}

	.btm-top-slider {
		flex: 1;
	}

	.btm-mid {
		height: 76rpx;
		margin: 24rpx 0;
	}

	.btm-mid-view {
		width: 88rpx;
		color: #3791E9;
		font-size: 24rpx;
		text-align: center;
	}

	.btm-mid-view2 {
		flex: 1;
	}

	.btm-mid-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 22rpx;
	}

	.btm-btm-box {
		padding: 0 24rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.btm-btm {
		width: 50%;
		height: 86rpx;
		line-height: 86rpx;
		border-bottom: 1px solid #E8E8E9;
		box-sizing: border-box;
	}

	.btm-btm text:first-child {
		color: #3791E9;
		padding-right: 40rpx;
		border-right: 1px solid #E8E8E9;
		margin-right: 24rpx;
	}

	.btm-btm:nth-child(odd) {
		border-right: 1px solid #E8E8E9;
	}

	.btm-btm:nth-child(even) {
		padding-left: 24rpx;
	}
</style>